<template>
  <div class="jw-container">
    <v-tabs align-tabs="center" v-model="tab">
      <v-tab>卷</v-tab>
      <v-tab>章</v-tab>
      <v-tab>节</v-tab>
    </v-tabs>
    <div class="h-[calc(100%-60px)] overflow-hidden">
      <STabsWindow v-model="tab" class="relative h-full">
        <SwiperSlide class="h-full overflow-y-auto overflow-x-hidden">
          <v-item-group :model-value="selectZhangItemIndex">
            <div v-for="(item, index) in dist" :key="index" style="padding: 0 10px">
              <div class="my-2 h-[32px] leading-[32px] text-[14px]" ref="newoldRef" :data-value="index">
                {{ item.title }}
              </div>
              <v-row class="px-2">
                <v-item v-slot="{ isSelected: active, toggle }" v-for="(item1, index1) in item.children" :key="index1">
                  <v-col
                    v-ripple
                    :cols="3"
                    @click="handleClickZhangItem(index1, item1, toggle, active, index)"
                    class="col-border"
                    :class="{ active }"
                  >
                    <div class="d-flex flex-column justify-center align-start py-3">
                      <div class="text-title">{{ item1.shortTitle }}</div>
                      <div class="text-[12px] text-subtitle">
                        {{ item1.title }}
                      </div>
                    </div>
                  </v-col>
                </v-item>
              </v-row>
            </div>
          </v-item-group>
          <div class="bottom-tol">
            <div
              v-for="(item, index) in newOldOptions"
              class="bottom-tol-item"
              :key="index"
              :class="{ active: currentNewOld === item.value }"
              @click="hendleChangeNewOld(item.value)"
            >
              {{ item.text }}
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide class="h-full overflow-y-auto overflow-x-hidden">
          <v-item-group :model-value="selectJieItemIndex" class="mt-2">
            <v-row class="px-2">
              <v-item
                v-slot="{ isSelected: active, toggle }"
                v-for="(item1, index1) in currentZhangItem?.children || []"
                :key="index1"
              >
                <v-col
                  v-ripple
                  :cols="3"
                  @click="handleClickJieItem(index1, item1, toggle, active)"
                  class="col-border"
                  :class="{ active }"
                >
                  <div class="d-flex flex-column justify-center align-start py-3">
                    <div class="text-title">{{ item1.title }}</div>
                    <div class="text-[12px] text-subtitle">共{{ item1.total }}节</div>
                  </div>
                </v-col>
              </v-item>
            </v-row>
          </v-item-group>
        </SwiperSlide>
        <SwiperSlide class="h-full overflow-y-auto overflow-x-hidden">
          <v-item-group :model-value="selectIndex" class="mt-2">
            <v-row class="px-2">
              <v-item
                v-slot="{ isSelected: active, toggle }"
                v-for="(item1, index1) in Array.from({
                  length: currentJieItem,
                })"
                :key="index1"
              >
                <v-col
                  :cols="3"
                  @click="handleClickSelect(toggle, active, index1)"
                  v-ripple
                  class="col-border"
                  :class="{ active }"
                >
                  <div class="d-flex flex-column justify-center align-start py-3">
                    <div class="text-title">{{ index1 + 1 }}</div>
                  </div>
                </v-col>
              </v-item>
            </v-row>
          </v-item-group>
        </SwiperSlide>
      </STabsWindow>
    </div>
  </div>
</template>
<script>
import { shallowReadonly } from "vue";
import { dist } from "./dist";
import STabsWindow from "@/components/STabsWindow.vue";
import { SwiperSlide } from "swiper/vue";
export default {
  name: "JingWen",
  emits: ["select"],
  components: { STabsWindow, SwiperSlide },
  computed: {
    currentZhangItem() {
      const sIndex = this.selectZhangItemIndex > 38 ? 1 : 0;
      const zIndex = this.selectZhangItemIndex > 38 ? this.selectZhangItemIndex - 39 : this.selectZhangItemIndex;
      return this.dist[sIndex].children[zIndex];
    },
    currentJieItem() {
      return this.currentZhangItem.children[this.selectJieItemIndex].total;
    },
  },
  data() {
    return {
      seacherStr: "",
      list: [],
      page: 1,
      limit: 20,
      total: 0,
      typelist: [],
      selectShuItemIndex: 0,
      selectZhangItemIndex: 0,
      selectJieItemIndex: 0,
      selectIndex: 0,
      tab: 0,
      dist: shallowReadonly(dist),
      currentNewOld: 0,
      newOldOptions: [
        { text: "旧约", value: 0 },
        { text: "新约", value: 1 },
      ],
      newEl: null,
      oldEl: null,
    };
  },
  mounted() {
    this.newEl = this.$refs.newoldRef[1];
    this.oldEl = this.$refs.newoldRef[0];
    this.init();
  },
  methods: {
    handleClickZhangItem(zindex, item, toggle, activated, index) {
      this.selectZhangItemIndex = index === 0 ? zindex : this.dist[0].children.length + zindex;
      this.selectJieItemIndex = 0;
      this.selectIndex = 0;
      this.tab = 1;
      !activated && toggle();
    },
    handleClickJieItem(index, item, toggle, activated) {
      console.log(item);
      this.selectJieItemIndex = index;
      this.selectIndex = 0;
      this.tab = 2;
      !activated && toggle();
    },
    handleClickSelect(toggle, activated, index) {
      this.selectIndex = index;
      !activated && toggle();
      const query = {
        id: `${this.currentZhangItem.shortTitle}${this.selectJieItemIndex + 1}:${1}-${this.currentJieItem}`,
        currentIndex: this.selectIndex,
        title: this.currentZhangItem.title,
        total: this.currentZhangItem.total,
        zhang: this.selectJieItemIndex + 1,
        shortTitle: this.currentZhangItem.shortTitle,
      };

      this.$emit("select", query);
    },
    hendleChangeNewOld(value) {
      if (value === 0) {
        this.oldEl.scrollIntoView();
      }
      if (value === 1) {
        this.newEl.scrollIntoView();
      }
      this.currentNewOld = value;
    },
    init() {
      const intersectionObserver = new IntersectionObserver((entries) => {
        if (entries[0].intersectionRatio <= 0) return;
        this.currentNewOld = +entries[0].target.dataset.value;
      });
      // 开始监听
      intersectionObserver.observe(this.newEl);
      intersectionObserver.observe(this.oldEl);
    },
  },
};
</script>
<style scoped>
.jw-container {
  width: 100%;
  height: 100%;
  /* background-color: #ffffff; */
}
.col-border {
  border-bottom: 1px solid rgb(var(--v-subtitle));
  border-right: 1px solid rgb(var(--v-subtitle));
}
.col-border.active {
  background-color: #374151;
}
.col-border:nth-child(4n + 1) {
  border-left: none;
}
.col-border:nth-child(4n + 4) {
  border-right: none;
}
.bottom-tol {
  display: flex;
  position: sticky;
  bottom: 0px;
  width: 100%;
  height: 48px;
  align-items: center;
  background-color: rgb(var(--v-theme-surface));
}
.bottom-tol-item {
  flex: 1;
  text-align: center;
  height: 100%;
  line-height: 48px;
}
.bottom-tol-item.active {
  color: #fb923c;
  /* background-color: #fafafa; */
}
</style>
